<template>
  <div>
    <!-- 输入框展示采购合同号 -->
    <el-input v-model="form.purchaseContractNum" readonly @click="openDialog" placeholder="请选择采购合同"
      style="width: 240px;">
      <template #append>
        <el-button icon="Close" @click.stop="clearPurchaseContract" />
      </template>
    </el-input>

    <!-- 弹窗 -->
    <el-dialog title="选择采购合同" v-model="dialogVisible" width="70%" top="10vh" append-to-body>
      <!-- 搜索区域 -->
      <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
        <el-form-item label="采购合同号" prop="purchaseContractNum">
          <el-input v-model="queryParams.purchaseContractNum" placeholder="请输入采购合同号" clearable @keyup.enter="handleQuery"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable @keyup.enter="handleQuery"
            style="width: 200px;" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">
            搜索
          </el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 合同表格 -->
      <el-table border v-loading="loading" :data="purchaseContractList" highlight-current-row height="300px"
        @current-change="handleSelect" :row-key="row => row.id">
        <el-table-column label="采购合同号" align="center" prop="purchaseContractNum" width="200" />
        <el-table-column label="项目名称" align="center" prop="projectName" width="200" />
        <el-table-column label="供应商名称" align="center" prop="supplierName" />
        <el-table-column label="签订日期" align="center" prop="signDate" width="200">
          <template #default="scope">
            <span>{{ parseTime(scope.row.signDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="getList" />

      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmSelect" :disabled="!selected">
          确认
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { listPurchaseContract } from '@/api/finance/purchaseContract'

// 父组件传入的 form 对象
const form = defineModel<any>('form')

// 输入框显示采购合同号
const purchaseContractNum = ref('')

// 弹窗状态
const dialogVisible = ref(false)
const loading = ref(false)
const purchaseContractList = ref<any[]>([])
const total = ref(0)
const selected = ref<any | null>(null)

// 查询条件
const queryParams = ref({
  pageNum: 1,
  pageSize: 50,
  purchaseContractNum: '',
  projectName: ''
})

// 获取列表
const getList = async () => {
  loading.value = true
  try {
    const res = await listPurchaseContract(queryParams.value)
    purchaseContractList.value = res.rows || []
    total.value = res.total || 0
  } finally {
    loading.value = false
  }
}

// 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1
  getList()
}

// 重置
const resetQuery = () => {
  queryParams.value = {
    pageNum: 1,
    pageSize: 50,
    purchaseContractNum: '',
    projectName: ''
  }
  handleQuery()
}

// 单选
const handleSelect = (row: any) => {
  selected.value = row
}

// 确认选择
const confirmSelect = () => {
  if (selected.value) {
    // 将合同指定字段赋值给父组件 form
    form.value.purchaseContractId = selected.value.id
    form.value.purchaseContractNum = selected.value.purchaseContractNum
    form.value.projectName = selected.value.projectName
    form.value.transportSection = selected.value.transportSection
    form.value.supplierName = selected.value.supplierName
    form.value.localTotalAmount = selected.value.localTotalAmount

    // 输入框显示采购合同号
    purchaseContractNum.value = selected.value.purchaseContractNum

    dialogVisible.value = false
  }
}

// 打开弹窗
const openDialog = async () => {
  await getList()
  dialogVisible.value = true
}

// 清除选择
const clearPurchaseContract = () => {
  form.value.purchaseContractId = null
  form.value.purchaseContractNum = ''
  form.value.projectName = ''
  form.value.transportSection = ''
  form.value.supplierName = ''
  form.value.localTotalAmount = null

  purchaseContractNum.value = ''
  selected.value = null
}
</script>
